<template>
  <div class="head-bar-container" :style="{'background':themeColor}" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'">
    <!-- 导航收缩 -->
    <span class="hamburger-container" :style="{'background':themeColor}">
      <hamburger :onClick="onCollapse" :isActive="collapse" />
    </span>
    <span class="app-full-name">{{appFullName}}</span>
    <span class="tool-bar">
      <!-- 主题切换 -->
      <theme-picker class="theme-picker" :default="themeColor" @on-theme-change="onThemeChange" />
      <!-- 用户信息 -->
      <el-dropdown class="user-info-dropdown" trigger="hover">
        <span class="el-dropdown-link"><img src="@/assets/logo.png" /> {{user.name}}</span>
        <el-dropdown-menu>
          <el-dropdown-item @click.native="modifyPassword" :disabled="!$_has('system:user:resetPwd')">修改密码</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
    <modify-password-dialog ref="modifyPasswordDialog" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ModifyPasswordDialog from '@/views/Home/ModifyPasswordDialog'
import Hamburger from '@/components/Hamburger'
import ThemePicker from '@/components/ThemePicker'
export default {
  components: {
    Hamburger,
    ThemePicker,
    ModifyPasswordDialog
  },
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    selectNavBar (key, keyPath) {
      console.log(key, keyPath)
    },
    // 折叠导航栏
    onCollapse () {
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange (themeColor, oldThemeColor) {
      this.$store.commit('setThemeColor', themeColor)
    },
    // 修改密码
    modifyPassword () {
      this.$refs.modifyPasswordDialog.setDialogVisible(true)
    },
    // 退出登录
    logout () {
      this.$confirm('确认退出吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.$store.commit('logout')
        this.$router.push('/login')
      }).catch(() => { })
    }
  },
  computed: {
    ...mapState({
      appFullName: state => state.app.config.sys_fullName,
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse,
      user: state => state.app.user
    })
  }
}
</script>

<style lang="scss">
.head-bar-container {
  position: absolute;
  left: 200px;
  right: 0px;
  height: 60px;
  line-height: 60px;
  .hamburger-container {
    width: 40px;
    float: left;
    border-color: rgba(238, 241, 241, 0.747);
    border-left-width: 1px;
    border-left-style: solid;
    color: white;
  }
  .app-full-name {
    font-size: 22px;
    color: white;
  }
  .nav-bar {
    margin-left: auto;
    float: left;
    .el-menu {
      background: #504e6180;
    }
  }
  .tool-bar {
    float: right;
    .theme-picker {
      padding-right: 10px;
    }
    .user-info-dropdown {
      font-size: 20px;
      padding-right: 20px;
      color: #fff;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin: 10px 0px 10px 10px;
        float: right;
      }
    }
  }
}
.head-bar-container.menu-bar-width {
  left: 200px;
}
.head-bar-container.menu-bar-collapse-width {
  left: 65px;
}
</style>
